<template>
  <div class="subject-container">
    <div class="nav-bar">
      <span class="close" @click="$router.back()">
        <img src="@/assets/arrow/ll.png" alt="" />
      </span>
      <span class="title">走起</span>
    </div>

    <!-- 当前tag的信息 -->
    <div class="tag-info" :style="{ backgroundImage: `url(${tagInfo.cover_blur_url})` }">
      <div class="mask">
        <span class="title">{{ tagInfo.title }} </span>
        <div class="msg-count">
          <span class="icon">
            <img src="@/assets/goImages/so.png" alt="" />
          </span>
          <span class="count">{{ tagInfo.pic_count }}</span>
        </div>
      </div>
    </div>

    <!-- 选择推荐还是最新 -->
    <div class="side-box">
      <div class="side-option">
        <div class="title">晒图</div>
        <div class="sort-by">
          <span class="sort" :class="{ active: is_selected == 1 }" @click="editIsSelected(1)">推荐</span>
          <span class="line">|</span>
          <span class="new" :class="{ active: is_selected == 0 }" @click="editIsSelected(0)">最新</span>
        </div>
      </div>
      <refresh-list :canFresh="true" :status="status" @on-load="onLoad">
        <template #list>
          <div class="side-list">
            <side-item :type="side.type == 5 ? 'video_post' : 'all'" :sideInfo="side" v-for="(side, index) in recommendList" :key="index"></side-item>
          </div>
        </template>
      </refresh-list>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import RefreshList from '../activity/public-component/RefreshList.vue'
import SideItem from '../businesses/SideItem.vue'
export default {
  props: ['id'],
  components: {
    SideItem,
    RefreshList
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      title: '',
      is_selected: 1,
      page: 1,
      tagInfo: {},
      recommendList: []
    }
  },
  methods: {
    async requestCurTag() {
      /*
      请求地址：https://api.xmonster.cn/v2/subjects/112082
      请求方式：get
      */
      const data = await axios.get('/v2/subjects/' + this.id)
      if (data) {
        this.tagInfo = data
      }
    },
    // 晒图推荐请求接口
    async requestRecommend() {
      /*
      请求地址：https://api.xmonster.cn/v2/subjects/112082/posts
      请求方式：get
      请求参数：
      params：{
        is_selected： 1，
        page: 1
      }
      */
      const data = await axios.get(`/v2/subjects/${this.id}/posts`, {
        params: {
          page: this.page,
          is_selected: this.is_selected
        }
      })
      if (data.length > 0) {
        this.recommendList = [...this.recommendList, ...data]
        this.status.loading = false
        this.isLoading = false
        this.page++
      } else {
        this.status.finished = true
      }
    },
    // 请求最新的数据
    async requestNewData() {
      /*
      请求地址：https://api.xmonster.cn/v2/subjects/112082/posts
      请求方式：get
      请求参数：
      params：{
        is_selected： 0，
        page: 1
      }
      */
      const data = await axios.get(`/v2/subjects/${this.id}/posts`, {
        params: {
          page: this.page,
          is_selected: this.is_selected
        }
      })
      if (data.length > 0) {
        this.recommendList = [...this.recommendList, ...data]
        this.status.loading = false
        this.isLoading = false
        this.page++
      } else {
        this.status.finished = true
      }
    },
    editIsSelected(val) {
      if (this.is_selected == val) return
      this.is_selected = val
      this.page = 1
      this.recommendList = []
      this.sendRequest()
    },
    // 滚动加载更多
    async onLoad() {
      if (this.is_selected == 0) {
        await this.requestNewData()
      } else {
        await this.requestRecommend()
      }
      this.status.loading = false
    },
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      if (this.is_selected == 0) {
        await this.requestRecommend()
      } else {
        await this.requestNewData()
      }
      Toast.clear()
    }
  },
  created() {
    this.requestCurTag()
    this.sendRequest()
  }
}
</script>

<style lang="less" scoped>
.subject-container {
  padding-top: 46px;

  .nav-bar {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d94648;
    padding: 0 20px;

    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
    }
    .close,
    .share {
      height: 30px;
      width: 30px;

      img {
        height: 100%;
        width: 100%;
      }

      &.close {
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          transform: rotate(180deg);
          height: 20px;
          width: 20px;
        }
      }
    }
  }

  .side-box {
    padding: 0 10px;
    .side-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #999;
      .title {
        padding: 10px 0;
        font-size: 18px;
        color: #333333;
        font-weight: 700;
      }

      .sort-by {
        .line {
          padding: 0 5px;
        }

        span.active {
          font-weight: 700;
          color: #d94648;
        }
      }
    }
  }

  .tag-info {
    position: relative;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    .mask {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background-color: rgba(0, 0, 0, 0.1);

      .title {
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .msg-count {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .icon {
          height: 16px;
          width: 16px;

          img {
            height: 100%;
            width: 100%;
          }
        }

        .count {
          color: #fff;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
